<template>
	<view class="hainan-container">
		<customImage imgSrc="/clb/clb/122/top.png"></customImage>
		<view class="money" style="text-align: center; height: 70rpx">
			<text style="text-align: center; color: #fefeff">资费：26.9/月 （合约期12个月）</text>
		</view>
		<view class="form-container">
			<uni-forms class="login-form" ref="accountForm" :model="formData">
				<uni-forms-item>
					<input
						style="width: 650rpx; font-size: 36rpx"
						maxlength="11"
						type="tel"
						placeholder="请输入手机号"
						v-model="formData.mobile"
						class="uni-input-input"
						placeholder-style="color: #818181"
					/>
				</uni-forms-item>
				<uni-forms-item>
					<view class="send-code">
						<input
							style="width: 350rpx; font-size: 36rpx; margin-left: 50rpx; display: block; visibility: visible"
							maxlength="6"
							type="tel"
							v-model="formData.smsCode"
							placeholder="请输入验证码"
							class="uni-input-input"
							placeholder-style="color: #818181"
						/>
						<view class="code-line"></view>
						<view class="code" style="color: #f31616; margin-left: 20rpx" :style="{ cursor: isSend ? 'not-allowed' : '' }" @click="sendCode">
							{{ isSend ? `重新发送 ${isNum}` : '获取验证码' }}
						</view>
					</view>
				</uni-forms-item>

				<view class="login-btn">
					<customImage imgSrc="/clb/clb/122/btn.png" width="650rpx" @click="submitform"></customImage>
				</view>
				<view style="margin-top: 40rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; align-items: center; justify-content: center">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #fdfdfd; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #ffffff; font-weight: 400; font-size: 28rpx" @click="privatePro(122)">《业务受理协议》</text>
				</view>
				<view class="" style="text-align: center; height: 60rpx; margin-top: 10rpx; color: #ffffff">
					<text @click="phone">客服电话： 400-8825-101</text>
					<text>和</text>
					<text @click="phone2">10086</text>
				</view>
			</uni-forms>
		</view>

		<customImage imgSrc="/clb/clb/122/bottom.png"></customImage>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<view class="sure-message">
				<view class="btn-close">
					<image src="/static/clb/122/sure/icom.png" style="width: 85rpx; height: 85rpx" mode="" @click="successOk"></image>
				</view>
				<view class="sure-image">
					<image src="/static/clb/122/success.png" style="width: 680rpx" mode="widthFix"></image>
				</view>
				<view class="cancel-btn">
					<image src="/static/clb/122/okB.png" style="width: 280rpx; height: 90rpx" mode="" @click="successOk"></image>
				</view>
			</view>
		</uni-popup>

		<view class="arrive-btn" :style="{ display: showHeight > 700 ? '' : 'none' }">
			<image src="/static/clb/122/btn.png" mode="" style="width: 650rpx; height: 110rpx" @click="toTop"></image>
		</view>

		<view class="fixed-1" @click="privatePro(122)">
			<image src="/static/clb/122/rule.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="phone">
			<image src="/static/clb/122/phone.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		
	</view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
const showHeight = ref(0);
const accountForm = ref();
const agreeType = ref(1);
const popupPro = ref();
// 表单数据
const isSend = ref(false);
const allChecked = ref();
const isNum = ref(0);
const isTimer = ref();
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const popup = ref();
const popupOk = ref();
const successOk = () => {
	popupOk.value.close();
};

const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};

const phone2 = () => {
	uni.makePhoneCall({
		phoneNumber: '10086' //客服
	});
};
const privatePro = (type) => {
	agreeType.value = type;
	popupPro.value.open('center');
};
const receiveEquity = () => {};
const ok1 = () => {
	popupPro.value.close();
	allChecked.value = true;
};
const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
		}
	}
);

const confirmOrder = async () => {
	try {
		const arr = {
			orderNo: formData.orderNo,
			mobile: formData.mobile,
			smsCode: formData.smsCode
		};
		const res = await initApi.processInventoryPackageOrder(arr);
		if (res.code != 20000) {
			window.location.href = `https://kshk.91bak.com/web_fcs/?mobile=${formData.mobile}&id=202410241001029140`;
			return uni.utils.toast(res.message);
		}
		// 订单成功的显示
		nextTick(() => {
			popupOk.value.open('center');
		});
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
	} catch (e) {
		//TODO handle the exception
		//TODO handle the exception
		window.location.href = `https://kshk.91bak.com/web_fcs/?mobile=${formData.mobile}&id=202410241001029140`;
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
	}
};
// no 无二次确认 直接下单
const submitform = async () => {
	if (!formData.mobile) return uni.utils.toast('请输入手机号');
	if (!formData.smsCode) return uni.utils.toast('请输入验证码');
	if (!allChecked.value) return uni.utils.toast('请勾选《 请阅读业务受理协议 》');
	// 没问题 弹出二次确认
	confirmOrder();
};
// 发送验证码
const confirmSendCode = async () => {
	try {
		const arr = {
			mobile: formData.mobile,
			channelCode: formData.channelCode,
			productCode: formData.productCode
		};
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
		if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
		const res = await initApi.initInventoryPackageOrder(arr);
		if (res.code != 20000) {
			window.location.href = `https://kshk.91bak.com/web_fcs/?mobile=${formData.mobile}&id=202410241001029140`;
			return uni.utils.toast(res.message);
		}
		formData.orderNo = res.data.orderNo;
		isNum.value = 60;
		isSend.value = true;

		isTimer.value = setInterval(() => {
			if (isNum.value <= 0) {
				clearInterval(isTimer.value);
				isNum.value = 0;
				isSend.value = false;
			}
			isNum.value--;
		}, 1000);
		return uni.utils.toast('验证码发送成功');
	} catch (e) {
		console.log(e);
		console.log(formData.mobile);
		uni.utils.toast('请输入正确手机号');
		isSend.value = false;
		isNum.value = 0;
		clearInterval(isTimer.value);
	}
};
const sendCode = async () => {
	if (isSend.value) return;

	if (!formData.mobile) return uni.utils.toast('请输入手机号');
	if (!allChecked.value) return uni.utils.toast('请勾选《 请阅读业务受理协议 》');
	// 发送验证码

	confirmSendCode();
	// 如何单独校验一个数据
};
onLoad((query) => {
	// 怎么获取这个数据
	// if (!query.a || !query.p) {
	// 	uni.reLaunch({
	// 		url: '/pages/clb/404'
	// 	});
	// }
	formData.channelCode = query.a;
	formData.productCode = query.p;
});
onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
</script>

<style lang="scss" scoped>
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
.sure-message {
	width: 680rpx;
	.btn-close {
		margin-bottom: 35rpx;
	}
	.cancel-btn {
		text-align: center;
		margin-top: 60rpx;
	}
}
.btn-con {
	display: flex;
	justify-content: space-around;
	margin-top: 30rpx;
}
.btn-close {
	text-align: end;
}
.dialog-con {
	position: relative;

	.send-code {
		position: absolute;
		width: 610rpx;
		height: 70rpx;
		top: 210rpx;
		z-index: 100;
		display: flex;
		height: 80rpx;
		border: 2rpx solid #fe374f;
		margin-left: 22rpx;
		border-radius: 100rpx;
	}
}
.form-container {
	width: 750rpx;
	margin: 0 auto;
	margin-top: 0rpx;
	margin-bottom: -2rpx;
	padding: 0 25rpx;

	.login-btn {
		width: 650rpx;
		margin-left: 25rpx;
		animation: scaleUp 2s infinite; /* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.send-code {
		display: flex;
		height: 100rpx;
		.code-line {
			height: 50rpx;
			width: 2rpx;
			border-left: 2rpx #7a7a7a solid;
			margin-top: 25rpx;
			margin-right: 6rpx;
		}
		.code {
			height: 100rpx;
			width: 200rpx;
			line-height: 100rpx;
			color: #4b5ae5;
			font-size: 32rpx;
			cursor: pointer;
		}
	}
	.uni-forms-item {
		width: 700rpx;
		height: 100rpx;
		margin-bottom: 20 !important;
		border-bottom: 2rpx solid #eee;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;
		.uni-input-input {
			width: 600rpx;
			margin-left: 50rpx;
		}
	}
}
.hainan-container {
	width: 750rpx;
	margin: 0 auto;
	background-color: #009cff;
	box-sizing: border-box;
	overflow-x: hidden;
}
::v-deep {
	image {
		vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
	}
}
:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
</style>